<template>
  <zh-app ref="app">
    <zh-navbar linear="left" title="应用管理"></zh-navbar>
    <view class="mt-10"></view>
    <zh-text v-if="!state.disabled" parentClass="text-align-center" color="grey" label="拖动可调整应用位置"></zh-text>
    <view class="mt-10"></view>
    <zh-grid v-if="state.disabled" :col="state.myCol" :margin="[20, 0]" title="自选应用">
      <zh-grid-item :linkItem="item" :height="140" v-for="item in myAppList" :key="item.menuId">
        <tm-icon :color="item.color" _class="pb-10" :font-size="46" :name="item.icon || item.iconImgUrl"></tm-icon>
        <zh-text :font-size="24" parentClass="text-align-center" _class="text-weight-b" :label="item.title"></zh-text>
      </zh-grid-item>
    </zh-grid>
    <zh-dragGrid v-if="!state.disabled" :list="myAppList" title="自选应用" :margin="[20, 0]" @change="onChange"> </zh-dragGrid>
    <zh-sheet v-if="!state.disabled" :margin="[20, 0]" :padding="[0, 0]">
      <view class="flex flex-row flex-wrap flex-row-center-center">
        <zh-button size="normal" color="blue" label="保存" @click="onSave"></zh-button>
        <view class="mr-20"></view>
        <zh-button :shadow="0" text size="normal" outlined label="取消" @click="onCancel"></zh-button>
      </view>
    </zh-sheet>
    <zh-sheet :margin="[20, 0]" :padding="[0, 10]">
      <zh-sheet :round="3" text :followTheme="true">
        <view class="relative bdcld flex flex-row flex-row-center-start">
          <tm-icon name="tmicon-info-circle-fill mr-10"></tm-icon>
          <zh-text :font-size="24" color="grey-darken-1" _class="text-weight-b mr-10" label="最多容纳14个应用"></zh-text>
          <zh-text :font-size="24" color="blue" v-if="state.disabled" _class="text-weight-b" label="去编辑" @click="onClick"></zh-text>
          <tm-icon name="tmicon-angle-right " v-if="state.disabled" :font-size="18" color="blue"></tm-icon>
        </view>
      </zh-sheet>
    </zh-sheet>
    <zh-grid :round="3" :col="state.systemCol" :margin="[20, 10]" v-for="item in systemAppList" :key="item.menuId" :title="item.title">
      <zh-grid-item
        :icon="childrenItem.disabled ? '' : 'tmicon-plus'"
        @click="addClick(childrenItem)"
        :height="140"
        v-for="childrenItem in item.children"
        :key="childrenItem.menuId"
      >
        <tm-icon :color="childrenItem.color" _class="pb-10" :font-size="46" :name="childrenItem.icon || childrenItem.iconImgUrl"></tm-icon>
        <zh-text :font-size="24" parentClass="text-align-center" _class="text-weight-b" :label="childrenItem.title"></zh-text>
      </zh-grid-item>
    </zh-grid>
    <zh-message ref="messageRef" :duration="2000"></zh-message>
  </zh-app>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import systemConfig from '@/common/config';
import systemConfigStore from '@/store/modules/systemConfigStore';
import * as u from '@/tool/function/util';
//---------------------定义组件---------------------------------------------
const app = ref<any>(null);
//---------------------定义内部变量-------------------------------------------------
const store = systemConfigStore();
const myAppList = ref<any>([]); //自选应用
const initAppList = ref<any>([]); //自选应用初始化
const systemAppList = ref([]); //系统设置的应用
const messageRef = ref();
const tmcfg: any = computed(() => store);
const state = reactive({ browserType: null, myCol: 5, myRow: 3, systemCol: 5, systemRow: 6, disabled: true });
//---------------------定义调用方法---------------------------------------
const getMyAppLst = () => {
  //获取自选应用
  let params: any = { useType: 'app', appId: systemConfig.appId };
  $api.common.send.post('userMenu0007', params).then((res: any) => {
    let result = res.result?.list || [];
    let list: any = [];
    if (result && result.length > 0) {
      let j = 1;
      result.forEach((item: any, index: number) => {
        if (j < state.myRow * state.myRow - 1) {
          if (isShowMenu(item.deviceType)) {
            j = j + 1;
            list.push(item);
          }
        }
      });
    }
    myAppList.value = list;
    initAppList.value = list;
  });
};
const getSystemAppLst = () => {
  //获取系统应用
  let params: any = { appId: systemConfig.appId, menuPro: 'person', menuType: 'common' };

  $api.common.send.post('appmenu0007', params).then((res: any) => {
    let result = res.result;
    let list: any = [];
    if (result && result.length > 0) {
      result.forEach((item: any) => {
        let childrenList: any = [];
        if (isShowMenu(item.deviceType) && item.children && item.children.length > 0) {
          let j = 1;
          item.children.forEach((itemChildren: any) => {
            if (j < state.systemCol * state.systemRow) {
              if (isShowMenu(itemChildren.deviceType)) {
                j = j + 1;
                itemChildren.disabled = getItemDisabled(itemChildren);
                childrenList.push(itemChildren);
              }
            }
          });
          item.children = childrenList;
          list.push(item);
        }
      });
    }
    systemAppList.value = list;
  });
};
const isShowMenu = (deviceType: any) => {
  //是否显示
  let isShow = true;
  if (!deviceType) {
    return isShow;
  }
  let str = deviceType.toLowerCase();
  if (str.indexOf('all') != -1) {
    return isShow;
  }
  if (state.browserType) {
    if (str.indexOf(state.browserType) != -1) {
      isShow = true;
    } else {
      isShow = false;
    }
  }
  return isShow;
};
const onClick = () => {
  //点击去编辑
  state.disabled = false;
  refleshMyApp();
};
const onCancel = () => {
  //点击取消
  state.disabled = true;
  getMyAppLst();
};
const addClick = (item: any) => {
  //添加
  if (item.disabled) {
    return;
  }
  let myItem = myAppList.value.filter((el) => el.menuId === item.menuId);
  if (!u.isEmpty(myItem)) {
    return;
  }
  item.orderNo = myAppList.value.length;
  myAppList.value.push(item);
  refleshMyApp();
};
const refleshMyApp = () => {
  systemAppList.value.forEach((item: any) => {
    if (item.children && item.children.length > 0) {
      item.children.forEach((itemChildren: any) => {
        itemChildren.disabled = getItemDisabled(itemChildren);
      });
    }
  });
};
const onChange = (list: any) => {
  let myList: any = [];
  list.forEach((item: any) => {
    let param = item.data;
    param.orderNo = item.index + 1;
    myList.push(param);
  });
  myAppList.value = myList;
};
const onSave = () => {
  //保存变动
  let params = { list: myAppList.value, useType: 'app' };
  $api.common.send.post('userMenu0009', params).then((res: any) => {
    let messageData: any = {};
    messageData.model = 'success';
    messageData.dark = tmcfg.dark;
    messageData.text = '操作成功！';
    messageRef.value.show(messageData);
  });
};
const getItemDisabled = (item: any) => {
  if (state.disabled) {
    return true;
  }
  let flag = false;
  let myItem = myAppList.value.filter((el) => el.menuId === item.menuId);
  if (!u.isEmpty(myItem)) {
    flag = true;
  }
  return flag;
};
//---------------------初始化----------------------------------------------
onLoad((option) => {
  getMyAppLst();
  getSystemAppLst();
});
</script>

<style></style>
